<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3D魔方</title>
		<style>
		    /* 通用选择器：规范页面结构---盒模型：内外边距 */
		    *{
		        margin:0;
		        padding:0;
		    }
		    /* 1.容器：视觉效果差，特点：①宽高  ②居中 ③视觉属性*/
		    .container{
		        width:300px;
		        height:300px;
		        /* 边框：确定选择器是否选中 */
		        bor der: 5px solid red;
		        /* 居中 */
		        margin:150px  auto;
		        /* 视觉属性：数值px   拉开距离 */
		        perspective:900px;
		        }
				
		        /* 2.魔方整体：3D主体部分，特点：①宽高  ②3D效果层：X轴 Y轴 Z轴 ③查看3D效果层 ④动画*/
		        .box{
		            width:300px;
		            height:300px;
		            bo rder:1px solid red;
		            /* 3D效果层：X、Y、Z坐标轴 */
		            transform-style: preserve-3d;
		            /* 查看3D效果层转换：旋转 X 45deg Y 45deg*/
		            transform:rotateX(45deg) rotateY(45deg);
		            animation: mofang 10s linear infinite;
		        }
		            
		         @keyframes mofang{
		            0%{
		                transform:rotateX(45deg) rotateY(45deg);
		            }
		            70%{
		                transform:rotateX(180deg) rotateY(180deg);
		            }
		            100%{
		                transform:rotateX(360deg) rotateY(360deg);
		            }
		        }
		         /* 3.六个面，公共面：①宽高一致，②绝对定位 */
		            .page{
		                width:300px;
		                height:300px;
		                /* 绝对定位：定一个基准点，xyz轴调整 */
		                position: absolute;
		            }
		            /* 3.1六个面的颜色 */
		            .page_top{
		                background-color: #e4393c;
		                /* Z轴 上面平移 150px*/
		                transform:translateZ(150px);
						background: url("../img/小马宝莉/云宝.png");
		            }
		            .page_bottom{
		                background-color: aqua;
		                transform:translateZ(-150px);
						background: url("../img/小马宝莉/云宝2.png")
		            }
		            .page_left{
		                background-color: #ffff00;
		                transform:translateX(-150px) rotateY(90deg);
						background: url("../img/小马宝莉/碧琪2.png")
		            
		            }
		            .page_right{
		                background-color: #ff00ff;
		                transform: translateX(150px) rotateY(90deg);
						background: url("../img/小马宝莉/云宝3.png")
		            }
		            .page_before{
		                background-color: #00ff7f;
		                transform: translateY(150px) rotateX(90deg);
						background: url("../img/小马宝莉/珍奇1.png")
		            }
		            .page_after{
		                background-color: #aa5500;
		                transform: translateY(-150px) rotateX(90deg);
						background: url("../img/小马宝莉/珍奇3.png")
		            }
		        </style>
		    </head>
		    <body>
		        <!-- 魔方：8个div组成
		                  外层div：视觉差，居中
		                  魔方整体div:六个面包起来-->
		        <div class="container">
		            <div class="box">
		                <!-- 六个面：公共属性：宽高一致 
		                                 颜色不一致
		                                 --->
		                <div class="page page_top" ></div>                
		                <div class="page page_bottom" ></div>
		                <div class="page page_left"></div>
		                <div class="page page_right"></div>
		                <div class="page page_before"></div>
		                <div class="page page_after"></div>
		            </div>
		        </div>
		        <audio src="./img/renxi.mp3" autoplay></audio>
		    </body>
		</html>